<template>
	<view class="container">
		<view class='search'>
			<view class='search-c'>
				<image @click="search" class='icon search-icon' src='@/static/image/zoom.png'></image>
				<input class='search-input' placeholder-class='search-input-p' placeholder='请输入类型搜索' v-model="searchTitle" @input="inputSearch"></input>
			</view>
			<button class="btn" @click="toggleSearchDialog('show')">筛选</button>
		</view>
		<empty v-if="examineList.length == 0"></empty>
		<view style="width:100%;height:100%" v-else>
			<view style="margin-top: 110upx;">
				<view style="width:calc(100% - 40upx);margin: 20upx;background-color: white;border-radius: 20upx;overflow: hidden;"
				 v-for="(item,index) in examineList" :key="index">
					<view class="list-cell">
						<view class="list-title">
							{{item.businessDesc}}
						</view>
						<view class="list-cell-item">
							<view class="item-title">申请时间</view>
							<view class="item-info">{{item.startTime}}</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">申请人</view>
							<view class="item-info">{{item.realName}}</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">身份证号</view>
							<view class="item-info">{{item.idCard}}</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">申请状态</view>
							<view v-if="item.processState == 0" class="item-info">审核中</view>
							<view v-else-if="item.processState == 1" class="item-info">完成</view>
							<view v-else-if="item.processState == 2" class="item-info">等待人脸核验</view>
							<view v-else-if="item.processState == 3" class="item-info">已失效</view>
							<view v-else-if="item.processState == 4" class="item-info">已取消</view>
						</view>
						<view class="list-cell-item" v-if="item.processState == 1">
							<view class="item-title">审核结果</view>
							<view v-if="item.passState == 0" class="item-info">不通过</view>
							<view v-else-if="item.passState == 1" class="item-info">已通过</view>
						</view>
						<view class="list-cell-item" v-if="item.processState == 0 && (item.passState == 0 || item.passState == 3)">
							<view class="item-title">审核结果</view>
							<view v-if="item.passState == 0" class="item-info">已移交</view>
							<view v-else-if="item.passState == 3" class="item-info">已驳回</view>
						</view>
						<view class="list-bottom">
							<button type="default" class="pay-btn" size="mini" @click="navToDetails(item)">查看</button>
							<button v-if="item.processState == 2 || (item.processState == 0 && item.passState == 3)" type="default" class="pay-btn"
							 size="mini" @click="update(item)">编辑</button>
							<button v-if="(item.processState == 0 && item.passState != 3) || item.processState == 2" type="default" class="pay-btn"
							 size="mini" @click="cancel(item)">取消</button>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadMoreType"></uni-load-more>
			</view>
		</view>
		<view class="search-mask" :class="searchMaskState===0 ? 'none' : searchMaskState===1 ? 'show' : ''" @click="toggleSearchDialog">
			<view class="search-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="search-list">
					<view class="search-item b-b two">
						申请状态
					</view>
					<view class="search-item b-b" :class="{active:examineState == 5}" @click="selectExamineState(5)">
						全部
					</view>
					<view class="search-item b-b" :class="{active:examineState == 0}" @click="selectExamineState(0)">
						审核中
					</view>
					<view class="search-item b-b" :class="{active:examineState == 1}" @click="selectExamineState(1)">
						审核完成
					</view>
					<view class="search-item b-b" :class="{active:examineState == 2}" @click="selectExamineState(2)">
						等待人脸核验
					</view>
					<view class="search-item b-b" :class="{active:examineState == 3}" @click="selectExamineState(3)">
						已失效
					</view>
					<view class="search-item b-b" :class="{active:examineState == 4}" @click="selectExamineState(4)">
						已取消
					</view>
					<view class="search-item b-b two">
						申请类型
					</view>
					<view class="search-item b-b" :class="{active:applyState == 0}" @click="selectApplyState(0)">
						全部
					</view>
					<view class="search-item b-b" :class="{active:applyState == '就业困难人员申请'}" @click="selectApplyState('就业困难人员申请')">
						就业困难人员申请
					</view>
					<view class="search-item b-b" :class="{active:applyState == '老年人高龄津贴申请'}" @click="selectApplyState('老年人高龄津贴申请')">
						老年人高龄津贴申请
					</view>
					<view class="search-item b-b" :class="{active:applyState == '最低生活保障申请'}" @click="selectApplyState('最低生活保障申请')">
						最低生活保障申请
					</view>
					<view class="search-item b-b" :class="{active:applyState == '困难群众临时救助申请'}" @click="selectApplyState('困难群众临时救助申请')">
						困难群众临时救助申请
					</view>
				</scroll-view>
				<view class="button-box">
					<view class="reset-btn" @click="resetSearch">重置</view>
					<view class="confirm-btn" @click="confirmSearch">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				searchTitle: '',
				examineList: [],
				serchData: {
					current: 1,
					size: 5,
					startAssigneeId: uni.getStorageSync("userInfo").userUuid,
				},
				total: 0,
				loadMoreType: "more",
				filterIndex: 0,
				activeIndex: 0,
				sortBy: "updateMoney",
				sort: "desc",
				searchMaskState: 0,
				examineState: 5,
				applyState: 0,
				url: ''
			}
		},
		components: {
			empty
		},
		onShow() {
			this.examineList = []
			this.initData();
		},
		onReachBottom() {
			if (this.loadMoreType === 'more') {
				this.serchData.current = this.serchData.current + 1;
				this.getRecordData()
			}
		},
		methods: {
			//查看详情
			navToDetails(item) {
				switch (item.processDefinitionKey) {
					case "disabled-flow":
						this.url = '/pages/declare/employment/declareEmploymentDetails?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "oldman-flow":
						this.url = '/pages/declare/oldman/declareDetailsOldMan?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "life-flow":
						this.url = '/pages/declare/declareLife/declareDetailsLife?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "poorpeople-flow":
						this.url = '/pages/declare/declarepoorpeople/declareDetailsPoorPeople?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "agricultural-flow":
						this.url = '/pages/declare/agricultural/declareDetailsAgricultural?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "birth-flow":
						this.url = '/pages/declare/bitrth/declareDetailsBitrth?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "household-flow":
						this.url = '/pages/declare/household/declareDetailsHousehold?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "pension-cancel-flow":
						this.url = '/pages/declare/cancel/declareDetailsCancel?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "medical-flow":
						this.url = '/pages/declare/medical/declareDetailsMedical?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					case "registration-flow":
						this.url = '/pages/declare/registration/declareDetailsRegistration?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory + "&verification=" + item.verification
						break
					default:
						break
				}
				uni.navigateTo({
					url: this.url
				})
			},
			//修改业务
			update(item) {
				switch (item.processDefinitionKey) {
					case "disabled-flow":
						this.url = '/pages/declare/employment/declareUpdateEmployment?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "oldman-flow":
						this.url = '/pages/declare/oldman/declareUpdateOldMan?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "life-flow":
						this.url = '/pages/declare/declareLife/declareUpdateLife?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "poorpeople-flow":
						this.url = '/pages/declare/declarepoorpeople/declareUpdatePoorPeople?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					case "agricultural-flow":
						this.url = '/pages/declare/agricultural/declareUpdateAgricultural?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					case "birth-flow":
						this.url = '/pages/declare/birth/declareUpdateBirth?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "household-flow":
						this.url = '/pages/declare/household/declareUpdateHousehold?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "pension-cancel-flow":
						this.url = '/pages/declare/cancel/declareUpdateCancel?businessKey=' + item.businessKey +
							"&businessCategory=" + item.businessCategory
						break
					case "medical-flow":
						this.url = '/pages/declare/medical/declareUpdateMedical?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					case "registration-flow":
						this.url = '/pages/declare/registration/declareUpdateRegistration?businessKey=' +
							item.businessKey + "&businessCategory=" + item.businessCategory
						break
					default:
						break
				}
				uni.navigateTo({
					url: this.url
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			//取消申请
			cancel(item) {
				let params = {
					businessCategory: item.businessCategory,
					businessKey: item.businessKey,
					taskComment: '取消申请',
					assigneeId: item.startAssigneeId,
					assigneeName: item.startAssigneeName
				}
				this.$api.request.cancelProcess(params, (res) => {
					if (res.code == 200) {
						this.$api.msg(res.msg)
						this.examineList = []
						this.initData();
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			//查询我的申请列表
			initData() {
				this.loadMoreType = "loading"
				this.serchData.businessDesc = this.searchTitle
				let params = this.serchData
				this.$api.request.myProcessOwnerInfo(params, (res) => {
					if (res.code == 200) {
						if (res.data != null) {
							this.examineList = this.examineList.concat(res.data.records)
							this.total = res.data.total
						}
						if (this.examineList >= this.total) {
							this.loadMoreType = "noMore"
						} else {
							this.loadMoreType = "loading"
						}
					} else {
						this.$api.msg(res.msg)
					}
				})
			},
			//重置搜索条件
			resetSearch() {
				this.searchTitle = "";
				this.clearSetting()
			},
			clearSetting() {
				this.examineState = 5;
				this.applyState = 0;
				this.selectExamineState(this.examineState);
				this.selectApplyState(this.applyState);
				this.serchData = {
					current: 1,
					size: 5,
					startAssigneeId: uni.getStorageSync("userInfo").userUuid,
				}
			},
			inputSearch() {
				this.examineList = []
				this.clearSetting()
				this.initData()
			},
			confirmSearch() {
				this.examineList = []
				this.initData()
				this.toggleSearchDialog()
			},
			//选择状态
			selectExamineState(index) {
				this.examineState = index
				if (index == 5) {
					this.serchData.processState = null
				} else {
					this.serchData.processState = index
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
			},
			//选择申请类型
			selectApplyState(index) {
				this.applyState = index
				if (index == 0) {
					this.serchData.businessCategory = null
				} else {
					this.serchData.businessCategory = index
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
			},
			toggleSearchDialog(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.searchMaskState = 2;
				setTimeout(() => {
					this.searchMaskState = state;
					console.log(this.searchMaskState)
				}, timer)
			},
			stopPrevent() {},
		}
	}
</script>
<style lang='scss'>
	page {
		background: #F8F8F8;
	}

	.user-section {
		width: 100%;
		height: 240upx;
		position: relative;
		background-color: #F8F8F8;
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	}

	.seach-box {
		height: 90upx;
	}

	.user-info-box {
		margin-top: 40upx;
		padding-left: 40upx;
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-sm;
			color: $font-color-base;
			margin-left: 20upx;
		}
	}

	.pay-btn {
		height: 50upx;
		line-height: 50upx !important;
		margin-top: 20upx;
		margin-left: 10upx;
		float: right;
		font-size: 24upx !important;
		background-color: #1DA3EE !important;
		color: white !important;
	}

	.user-info-contain {
		margin-left: 40upx;
		width: 70%;
		color: white;
	}

	.user-name-contain {
		font-size: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.list-cell {
		padding: 30upx;

		.list-title {
			height: 80upx;
			line-height: 90upx;
			border-bottom: 1px solid #e9eef5;
			font-size: 30upx;
			font-weight: bolder;
		}

		.list-bottom {
			height: 90upx;
			line-height: 90upx;
		}

		.list-cell-item {
			height: 80upx;
			line-height: 70upx;
			border-bottom: 1px solid #e9eef5;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}

		.list-cell-last {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}
	}

	.title-icon {
		background-color: #00BFFF;
		color: white;
		font-weight: bold;
		font-size: 30upx;
		padding-left: 20upx;
		width: 160upx;
		border-top-right-radius: 30upx;
		height: 50upx;
		border-bottom-right-radius: 30upx;
		line-height: 50upx;
		margin-top: 30upx;
	}

	.search {
		width: 100%;
		height: 104upx;
		padding: 16upx 26upx;
		background-color: #F8F8F8;
		z-index: 999;
		transition: all .5s;
		display: flex;
		position: fixed;
		top: 0
	}

	.search-c {
		height: 100%;
		position: relative;
		width: 80%;
		margin-right: 2%;
	}

	.search-input {
		background-color: white;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		line-height: 52upx;
		border-radius: 50upx;
		font-size: 24upx;
		transition: all .5s;
		padding: 10upx 30upx 10upx 90upx;
	}

	.search-input-p {
		color: #999;
		width: 100%;
		height: 100%;
		padding: 0 !important;
	}

	.search-input-p-c {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}

	.search-icon {
		position: absolute;
		top: 50%;
		left: 30upx;
		right: 30upx;
		transform: translateY(-50%);
		z-index: 999;
	}

	.icon {
		width: 50upx;
		height: 50upx;
		z-index: 999;
		/* #ifdef MP-ALIPAY */
		background-size: 100% 100%;
		/* #endif */
	}

	.search .btn {
		width: 20%;
		background-color: #f1f1f1;
		font-size: 28upx;
		color: #333;
		height: 72upx;
		line-height: 72upx;
	}

	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 999;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.search-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	.search-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 999;
		transition: .3s;

		.search-content {
			width: 450upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;

			.button-box {
				position: absolute;
				bottom: 0;
				height: 80upx;
				display: flex;
				flex-direction: row;
				z-index: 1001;

				.reset-btn {
					width: 225upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					background-color: white;
					color: #ffaa00;
					cursor: pointer;
				}

				.confirm-btn {
					width: 225upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					background-color: #ffaa00;
					color: white;
					cursor: pointer;
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.search-content {
				transform: translateX(0);
			}
		}
	}

	.search-c {
		height: 100%;
		position: relative;
		width: 80%;
		margin-right: 2%;
	}

	.search-list {
		display: flex;
		flex-direction: column;
		height: calc(100% - 80upx);

		.search-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}
</style>
